<template>
  <div class="CommodityClassify">
    <el-cascader :options="options"
                 @change="handleChange"
                 :value="inner_value"
                 :disabled="injectedModeType.mode == 'preview' || !editable"
                 placeholder=""
                 ref="select">

    </el-cascader>
  </div>
</template>

<script lang="ts">
import {Vue, Component, Prop, Watch, Emit, Inject, Model} from 'vue-property-decorator';
import {CascaderOption, ClassifyProperties, ClassifyTreeDto, OptionType} from "./type";
import masterModal from "../../../../../api/module/masterModal";
import {CommonResult} from "../../../plugins/dto";
@Component({
  name: "CommodityClassify",
  model: {
    prop: "value",
    event: "update"
  }
})
export default class CommodityClassify extends Vue{
  @Prop({default: {}})value:ClassifyProperties = {
    "classFirst": "",
    "classFourth": "",
    "classSecond": "",
    "classThird": ""};
  options:CascaderOption[] = [] as any
  inner_value:string[] = []
  @Prop({default:true})editable!:boolean
  @Inject('modeType') injectedModeType!: {mode: string};
  @Emit("update")
  handleUpdate(value:string){
    return value
  }

  @Emit("change")
  changeUpdate(value:string){
    return value
  }

  @Watch("value", {immediate: true, deep: true})
  handleValueChange(value:string){
    if(value){
      const classList = value.split(",")
      this.inner_value = classList
    }else{
      this.inner_value = []
    }
  }
  @Prop({default:{}})item!:any

  async mounted(){
    //获取商品分类数据
    const res:CommonResult<ClassifyTreeDto[]> = await masterModal.getClassifyData()
    if(res.code === 200 && res.data){
      function mapToTree(data:ClassifyTreeDto[]){
        return data.map(item => {
          let children: OptionType[] = []
          if(item.children && item.children.length){
            children = mapToTree(item.children)
          }
          if(children.length){
            return {label:item.name, value:item.code, children}
          } else {
            return {label:item.name, value:item.code}
          }
        })
      }
      this.options = mapToTree(res.data)
    }
    this.inner_value = this.item.value?.split(',')
  }
  focus(){
    //@ts-ignore
    this.$refs.select.focus()
  }
  handleChange(value:string[]){
    if(value.length === 1){
      this.inner_value = [value[0]]
      this.handleUpdate(`${value[0]}`)
      //@ts-ignore
      this.changeUpdate(this.$refs.select.inputValue.split("/").join(">"))
    }
    if(value.length === 2){
      this.inner_value = [value[0], value[1]]
      this.handleUpdate(`${value[0]},${value[1]}`)
      //@ts-ignore
      this.changeUpdate(this.$refs.select.inputValue.split("/").join(">"))
    }
    if(value.length === 3){
      this.inner_value = [value[0], value[1], value[2]]
      this.handleUpdate(`${value[0]},${value[1]},${value[2]}`)
      //@ts-ignore
      this.changeUpdate(this.$refs.select.inputValue.split("/").join(">"))
    }
    if(value.length ===4){
      this.inner_value = [value[0], value[1], value[2], value[3]]
      this.handleUpdate(`${value[0]},${value[1]},${value[2]},${value[3]}`)
      this.$nextTick(()=>{
        //@ts-ignore
        this.changeUpdate(this.$refs.select.$data.presentText.split("/").join(">"))
      })

    }
  }
}
</script>

<style lang="scss" scoped>
.CommodityClassify{
  ::v-deep .el-input__inner {
    height: 28px;
    line-height: 28px;
    border: none;
    padding: 0
  }
  ::v-deep .el-cascader{
    line-height: 28px;
  }
  ::v-deep .el-input.is-disabled .el-input__inner{
    background: unset !important;
    color: #606266
  }
  ::v-deep .el-input.is-disabled .el-input__inner {
    text-overflow: clip;
  }
}
</style>